<template>
  <view class="page-container">
    <HeaderBar
      :isFixed="true"
      title="订单列表"
      navBarBgc="linear-gradient(180deg, rgba(150,209,182,1) 0%, rgba(224,241,233,1) 67%, rgba(243,250,247,1) 100%);"
    ></HeaderBar>
    <view class="content-container">
      <view class="order-header-container">
        <view class="search-container">
          <view class="input-container">
            <wd-input type="text" custom-class="custom-search-input-class" v-model="searchValue" placeholder="搜索订单" />
          </view>
          <view class="search-btn-container" @click="handleSearch">
            <wd-icon name="search" size="22px" color="#ffffff"></wd-icon>
          </view>
        </view>
        <view class="order-status-container">
          <wd-tabs
              v-model="tabIndex"
              auto-line-width
              custom-class="custom-tabs-class"
              @change="changeTab"
          >
            <block v-for="(item) in orderStatusList" :key="item.value">
              <wd-tab :title="item.label">
              </wd-tab>
            </block>
          </wd-tabs>
        </view>
      </view>
      <view class="order-list-container">
        <view class="order-item-container" v-for="item in orderList" :key="item">
          <view class="order-item-header-container flex justify-between items-end">
            <view class="left-container">
              <view class="provider-name">{{item.merchantName}}</view>
              <view class="order-id">订单编号：{{item.id}}</view>
            </view>
            <view class="right-container tr">
              <view class="order-status">{{item.statusLabel}}</view>
              <view class="left-time" v-if="item.status === 0">
<!--                剩余时间：14：36-->
              </view>
            </view>
          </view>
          <view class="order-item-content-container flex items-start">
            <view class="provider-img-container">
              <img
                  v-if="item.headImgUrl"
                  :src="item.headImgUrl"
                  :lazy-load="true"
                  class="provider-img"
              ></img>
            </view>
            <view class="product-info-container ml30">
              <view class="product-name" v-if="!item.type">{{item.skuNames.join("")}}</view>
              <view class="product-name" v-else>{{item.productName}}</view>
              <view class="crowd-container">{{item.productDescribed}}</view>
              <view class="use-date" v-if="!item.type">
                使用日期：{{item.useDate}} - {{item.startTime}}
              </view>
              <view class="use-date" v-else>使用日期：{{item.useDate}}</view>
              <view class="quantity" v-if="item.number">数量：{{item.number}}张</view>
            </view>
            <view class="price tr">{{item.payAmount}}</view>
          </view>
          <view class="order-item-bottom-container flex justify-end">
            <view class="mr20 btn btn-bgc" v-if="item.status === 6">申请开票</view>
            <view class="mr20 btn btn-bgc" v-if="item.status === 1">申请售后</view>
            <view class="mr20 color22 bgcolor7 btn" v-if="item.status !== 0" @click="navToProviderDetail(item)">再次购买</view>
          </view>
        </view>
        <wd-status-tip
            v-if="!orderList.length"
            image="content" tip="暂无订单"
            :image-size="{
              height: 200,
              width: 200
            }"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  import HeaderBar from '@/components/HeaderBar/index.vue';
  import {orderListApi} from "@/api/common";
  import {useCommonData} from "@/hook/useCommonData";
  import {useMixin} from "@/hook/useMixin";

  const { handleOrderStatus } = useCommonData();
  const { handleNavToProviderDetail } = useMixin();

  const orderStatusList = ref([
    { label: "全部", value: 0 },
    { label: "待付款", value: 1 },
    { label: "待确认发货", value: 2 },
    { label: "待使用收货", value: 6 },
    { label: "退款售后", value: 4 },
  ]);
  const searchValue = ref('');
  const tabIndex = ref(0);
  const orderStatus = ref(0);
  const pageSize = ref(5);
  const pageNo = ref(1);
  const totalNumber = ref(0);
  const orderList = ref([]);

  const navToProviderDetail = (event) => {
    console.log(event,'event');
    let { merchantName, merchantId, type  } = event;
    handleNavToProviderDetail({type, id: merchantId, name: merchantName});
  };
  const changeTab = (event) => {
    pageNo.value = 1;
    totalNumber.value = 0;
    orderList.value = [];
    let {index} = event;
    orderStatus.value = orderStatusList.value[index].value;
    queryOrderList();
  };
  const handleSearch = () => {
    pageNo.value = 1;
    totalNumber.value = 0;
    orderList.value = [];
    queryOrderList();
  };
  const queryOrderList = async () => {
    await orderListApi({
      pageSize: pageSize.value,
      pageNo: pageNo.value,
      keyword: searchValue.value,
      status: orderStatus.value,
    }).then((res) => {
      let {result,total} = res;
      totalNumber.value = total;
      console.log(res,'orderList');
      let _orderList = result.map(orderItem => {
        if(!orderItem.myOrderClient) orderItem.myOrderClient = {};
        return {...orderItem,...orderItem.myOrderClient,statusLabel: handleOrderStatus(orderItem.status)}
      });
      orderList.value = [...orderList.value,..._orderList]
      console.log(orderList,'orderList')
    })
  };

  onReachBottom(() => {
    console.log(totalNumber,'totalNumber');
    console.log(orderList,'orderList');
    if(totalNumber.value > orderList.value.length) {
      pageNo.value += 1;
      queryOrderList();
    }
  });
  onShow(() => {
    queryOrderList();
  });
</script>

<style lang="scss" scoped>
  .page-container {
    background: #eeefe7;
    min-height: 100vh;
    .content-container {
      .order-header-container {
        padding: 44rpx 0 20rpx 0;
        position: fixed;
        top: 176rpx;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        .search-container{
          margin: 0 27rpx 20rpx 27rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 700rpx;
          height: 69rpx;
          border-radius: 34rpx;
          overflow: hidden;
          background-color: #FFFFFF;
          border: 2rpx solid #1B9C61;
          box-shadow: -3rpx -1rpx 5rpx 0rpx rgba(0,0,0,0.17);
          .input-container{
            :deep(.custom-search-input-class) {
              background: #FFFFFF;
              height: 69rpx;
              width:560rpx;
              .wd-input__body {
                height: 69rpx;
                .wd-input__value{
                  height: 100%;
                  padding-left: 20rpx;
                }
              }
            }
          }
          .search-btn-container{
            flex: 1;
            border-top-left-radius: 35rpx;
            border-bottom-left-radius: 35rpx;
            text-align: center;
            background: #1B9C61;
            height: 69rpx;
            line-height: 69rpx;
          }
        }
      }
      .order-list-container {
        padding: 400rpx 0 60rpx 0;
        margin: 27.5rpx;
        width: auto;
        .order-item-container {
          margin-bottom: 27.5rpx;
          padding: 32rpx 26.5rpx;
          border-radius: 10rpx;
          box-shadow: -3rpx -1rpx 10rpx 0rpx rgba(0,0,0,0.15);
          background: #FFFFFF;
          .order-item-header-container {
            .left-container {
              .provider-name {
                font-size: 29rpx;
                font-weight: bold;
              }
              .order-id {
                font-size: 25rpx;
                margin-top: 15rpx;
                color: #777777;
              }
            }
            .right-container {
              font-size: 25rpx;
              color: #AA5413;
            }
          }
          .order-item-content-container {
            margin-top: 39.5rpx;
            .provider-img-container {
              width: 125rpx;
              height: 125rpx;
              border-radius: 10rpx;
              overflow: hidden;
              background: #EEF0DF;
              .provider-img {
                width: 100%;
                height: 100%;
                background-size: cover;
              }
            }
            .product-info-container {
              width: 65%;
              .product-name {
                margin-bottom: 15rpx;
                font-size: 25rpx;
                font-weight: bold;
              }
              .crowd-container {
                font-size: 22rpx;
                color: #777777;
              }
              .use-date {
                font-size: 22rpx;
                color: #777777;
              }
              .quantity {
                margin-top: 13rpx;
                font-size: 22rpx;
              }
            }
            .price {
              font-size: 29rpx;
              font-weight: bold;
            }
            .price:before {
              content: "￥";
              font-size: 22rpx;
            }
          }
          .order-item-bottom-container {
            margin-top: 27.5rpx;
            .btn {
              padding: 8.5rpx;
              font-size: 25rpx;
              border-radius: 10rpx;
            }
            .btn:last-child {
              margin-right: 0 !important;
            }
            .btn-bgc {
              background-color: #EEF0DF;
            }
          }
        }
      }
    }
    :deep(.custom-tabs-class) {
       .wd-tabs__nav {
         .wd-tabs__nav--wrap {
           .wd-tabs__nav-container {
             .wd-tabs__line {
               background: #1B9C61 !important;
             }
             .wd-tabs__nav-item {
               font-size: 25rpx !important;
               color: #2B2B24 !important;
             }
             .is-active {
               font-size: 29rpx !important;
             }
           }
         }
      }
    }
  }
</style>